<template>
	<div id="app">
		<v-app>
			<div>
				<!--警告信息提示-->
				<v-app-bar app color="#FF5252">
					<v-list-item-title style="text-align: center;font-size:18px;color:white">房源</v-list-item-title>
					<v-btn elevation="0" small color="#FF5252" router-link :to="{ path: '/main/discover' }" class="go_back">
						<icon name="back" scale="2" color="white"></icon>
					</v-btn>
				</v-app-bar>

				<!-- 区域选择弹窗(取消 不需要弹窗) -->
				<!-- 				<el-dialog title="选择区域" :visible.sync="search_sx" width="80%" top="20vh">
					<div>
						<el-cascader :show-all-levels="false" :props="props" style="padding: 3px;width: 100%;" placeholder="选择区域" v-model="partyOrganId"
							prefix-icon="el-icon-office-building"></el-cascader>
						<div style="padding-top:4px">
							<span>
								<el-button style="float: right;padding: 3px;background-color:#FF5252;color: #f2f2f2" plain @click="search()">搜索</el-button>
							</span>
						</div>
					</div>
				</el-dialog> -->
				<!--筛选栏-->

				<!--                checkbok可以实现选择了获取相对应的值-->
				<v-navigation-drawer v-model="drawer" app right temporary>
					<v-list-item>
						<v-list-item-content>
							<v-list-item-title>价格区间(元)</v-list-item-title>
							<v-row style="margin-top: 10px">
								<v-col style="text-align: right ">
									<input v-model="lowPrice" class="priceText" placeholder="最低价" />
								</v-col>
								<span style="padding-top:7%">—</span>
								<v-col>
									<input v-model="highPrice" class="priceText" placeholder="最高价" />
								</v-col>
							</v-row>
						</v-list-item-content>
					</v-list-item>
					<v-list-item>
						<v-list-item-content>
							<v-list-item-title>房源户型(多选)</v-list-item-title>
							<v-row style="margin: 0px auto 0px;">
								<v-col>
									<v-chip-group active-class="primary--text" column multiple>
										<!--TODO 返回的是true或者flase 选中是ture  没选是false   BOOLEAN类型  将要在这里判断是否有选中 有的放到 unit 数组中-->
										<v-chip v-model="house_type_one" outlined>小户型</v-chip>
										<v-chip v-model="house_type_two" outlined>一居</v-chip>
										<v-chip v-model="house_type_three" outlined>二居</v-chip>
										<v-chip v-model="house_type_four" outlined>三居</v-chip>
										<v-chip v-model="house_type_five" outlined>四居</v-chip>
										<v-chip v-model="house_type_six" outlined>其他</v-chip>
									</v-chip-group>
								</v-col>
							</v-row>
						</v-list-item-content>
					</v-list-item>

					<v-list-item>
						<v-list-item-content>
							<v-list-item-title>出租类型(多选)</v-list-item-title>
							<v-row>
								<v-col align="center">
									<v-btn-toggle color="deep-purple accent-3" multiple group>
										<v-btn v-model="live_chose_dj" value="单间" fab>单间</v-btn>
										<v-btn v-model="live_chose_hz" value="合租" fab style="margin-left: 5%">合租</v-btn>
										<v-btn v-model="live_chose_tf" value="套房" fab style="margin-left: 5%;">套房</v-btn>
									</v-btn-toggle>
								</v-col>
							</v-row>
						</v-list-item-content>
					</v-list-item>
					<v-list-item>
						<v-list-item-content>
							<v-list-item-title>配套设施(多选)</v-list-item-title>
							<v-row style="margin: 0px auto 0px;">
								<v-col>
									<v-chip-group active-class="primary--text" column multiple light v-model="check_service">
										<div v-for="service in service_item" :key="service.id">
											<v-chip outlined>{{service.name}}</v-chip>
										</div>
									</v-chip-group>
								</v-col>
							</v-row>
						</v-list-item-content>
					</v-list-item>
					<v-divider></v-divider>
					<div style="padding: 0 50px">
						<v-btn height="40px" block x-large dark color="#FF5252" style="font-size: 18px;" @click="(drawer = !drawer), search()">确认</v-btn>
					</div>
				</v-navigation-drawer>
				<!--搜索框-->
				<div style="width: 100%;margin: 0 auto;text-align: center;">
					<v-text-field label="房屋类型/装修类型/面积..." style="margin: 10px;width:76vw;float:left;" hide-details clearable
						background-color="#F2F2F2" solo flat prepend-inner-icon="search" v-model="vague"></v-text-field>
					<v-btn depressed color="error" style="margin:15px 12px;width:10%;min-width:1vh;float:left;" @click="search()">搜索</v-btn>
				</div>
				<div class="clearfloat"></div>
				<v-container fluid grid-list-md>
					<v-layout column>
						<v-row no-gutters style="padding: 0 0">
							<v-col>
								<el-cascader :show-all-levels="false" :props="props" style="width: 100%;" placeholder="区域" v-model="partyOrganId"
									prefix-icon="el-icon-office-building" @change="search()"></el-cascader>
								<!-- <v-card :flag="flag" class="pa-2" outlined tile style="text-align: center" @click="search_sx = true">区域</v-card> -->
							</v-col>

							<v-col>
								<v-card outlined solo flat style="text-align: center;background-color:#dcdfe61a ;" height="100%" width="100%">
									<select v-model="sort_key" style="height:100%;width:100%">
										<option v-for="option in options" :key="option.id" :value="option.id" style="text-align: center">{{ option.text }}</option>
									</select>
								</v-card>
							</v-col>

							<v-col>
								<v-card class="pa-2" solo outlined tile style="text-align: center;background-color:#dcdfe61a ;" @click.stop="drawer = !drawer">
									筛选
									<icon name="filter" scale="1"></icon>
								</v-card>
							</v-col>
						</v-row>
					</v-layout>
				</v-container>
				<div v-for="(item,i) in houses" :key="i">
					<v-list-item three-line @click="goHouseDel(item.house_id)">
						<v-list-item-avatar tile size="100" width="130" class="image_border_list"><img :src="item.index_image_url" alt="未加载" />
						</v-list-item-avatar>
						<v-list-item-content>
							<v-list-item-title class="headline mb-1"><span style="font-size: 16px;">{{item.title}}</span></v-list-item-title>
							<v-list-item-subtitle><span>{{item.area_name}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{item.lease_type}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{item.acreage}}m²</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{item.renovation}}</span></v-list-item-subtitle>
							<div class="overline" style="color:#FF5252">{{item.month_price}}元/月</div>
						</v-list-item-content>
					</v-list-item>
				</div>		
				<div class="no_content" v-if="total_page==0">
					<icon name="no_content_two" scale="15"></icon>
					<div style="margin: 0 auto;font-size: 18px;">对不起，没有满足条件的房屋！</div>
				</div>

				<div class="text-center" @click="getHouseData()" v-if="total_page!==1 && total_page!==0 ">
					<v-pagination v-model="page" :length="total_page"></v-pagination>
				</div>
			</div>
			<v-btn text icon color="#ff5252" style="position: fixed; right: 2vw;top: 80%;">
				<v-icon @click="reload()">mdi-cached</v-icon>
			</v-btn>
		</v-app>
            <!--错误信息提示-->
            <v-snackbar v-model="snackbar" bottom :timeout="timeout">
                {{ message }}
            </v-snackbar>
	</div>
</template>

<script>
	import axios from "axios";

	export default {
		name: "HousingList",
		data() {
			return {
				flag: false,
				timeout: 1000,
				lowPrice: null,
				highPrice: null,
				drawer: false,
				group: null,
				show: false,
				snackbar: false,
				message:'',
				test: "",
				test_two: "",
				search_sx: false,
				service_item: [], // 从后端加载出来的设备
				//*****分页*********
				page: 1, // 传回后端的页数
				total_page: 1, // 总页数
				current_page: "", // 当前页码 
				houses: [], // 页面数据
				//**************
				//*****传回去的参数*********
				house_type_filter: [], //户型选择条件
				lease_type_filter: [], // 出租类型条件
				check_service: [], // 房屋设备选项条件
				aid: this.$route.query.aid, // 区域id
				sort_key: "1", // 排序方式
				vague: "", // 模糊查询 
				//**************
				options: [{
						text: "最新",
						id: "1",
					},
					{
						text: "价格从低到高",
						id: "2",
					},
					{
						text: "价格从高到低",
						id: "3",
					}
				],
				//------------------ 把这里的数据经过判断为真的值以后传给后端
				house_type_one: false,
				house_type_two: false,
				house_type_three: false,
				house_type_four: false,
				house_type_five: false,
				house_type_six: false,
				service_ly: false,
				service_wl: false,
				service_kt: false,
				service_tv: false,
				service_cf: false,
				service_dw: false,
				service_nq: false,
				service_yxzf: false,
				live_chose_dj: false,
				live_chose_tf: false,
				live_chose_hz: false,
				//------------------
				items: [],
				itemAll: [],
				list: [],
				return: {},
				partyOrganId: [],

				// 父主键向下传递给值给子组件
				props: {
					lazy: true,
					lazyLoad(node, resolve) {
						setTimeout(() => {
							if (node.level === 0) {
								axios({
										method: "get", //请求方式
										url: "/api/v1.0/province", //请求地址
										params: {}
									})
									.then(res => {
										const province = res.data.data.map(value => ({
											value: value.pid,
											label: value.name,
											leaf: node.level >= 2
										}));
										resolve(province);
									})
									.catch(err => {
										console.log(err);
									});
							}
							if (node.level === 1) {
								axios({
										method: "get", //请求方式
										url: "/api/v1.0/city", //请求地址
										params: {
											pid: node.value
										}
									})
									.then(res => {
										console.log(res.data);
										const city = res.data.data.map(value => ({
											value: value.cid,
											label: value.cname,
											leaf: node.level >= 2
										}));
										// 通过调用resolve将子节点数据返回，通知组件数据加载完成
										resolve(city);
									})
									.catch(err => {
										console.log(err);
									});
							}
							if (node.level === 2) {
								axios({
										method: "get", //请求方式
										url: "/api/v1.0/area", //请求地址
										params: {
											cid: node.path[1]
										}
									})
									.then(res => {
										const area = res.data.data.map(value => ({
											value: value.aid,
											label: value.aname,
											leaf: node.level >= 2
										}));
										// 通过调用resolve将子节点数据返回，通知组件数据加载完成
										resolve(area);
									})
									.catch(err => {
										console.log(err);
									});
							}
						}, 500);
					}
				}
			}
		},
		watch: {
			//实时获取关键字信息 并进行搜索
			// vague: function() {
			// 	this.search();
			// 	if (this.items.length === 0) {
			// 		this.snackbar = true;
			// 	}
			// },
			//检测用户选择的排序
			sort_key: function() {
				this.getHouseData();
			},
			//判断筛选框是否显示
			group() {
				this.drawer = false;
			}
		},
		methods: {
			//搜索功能
			reload(){
				this.$router.go(0);
			},
			search() {
				this.page = 1;
				this.getHouseData();
			},
			//保存房屋id 渲染对应的房屋详情界面
			goHouseDel(house_id) {
				// localStorage.setItem('data', id);
				this.$router.push({
					name: "房屋详情",
					query: {
						house_id: house_id
					}
				});
			},
			getLeaseType() {
				this.lease_type_filter = [];
				if (this.live_chose_dj) {
					this.lease_type_filter.push("单间")
				}
				if (this.live_chose_tf) {
					this.lease_type_filter.push("套房")
				}
				if (this.live_chose_hz) {
					this.lease_type_filter.push("合租")
				}
				console.log(this.lease_type_filter)
			},
			getHouseType() {
				this.house_type_filter = [];
				if (this.house_type_one) {
					this.house_type_filter.push("小户型")
				}
				if (this.house_type_two) {
					this.house_type_filter.push("一居")
				}
				if (this.house_type_three) {
					this.house_type_filter.push("二居")
				}
				if (this.house_type_four) {
					this.house_type_filter.push("三居")
				}
				if (this.house_type_five) {
					this.house_type_filter.push("四居")
				}
				if (this.house_type_six) {
					this.house_type_filter.push("其他")
				}
				console.log(this.house_type_filter)
			},
			getHouseData() {
				let _this = this;
				console.log(this.check_service)
				this.getHouseType();
				this.getLeaseType();
				axios
					.get("/api/v1.0/houses/list", {
						params: {
							aid: _this.partyOrganId[this.partyOrganId.length - 1],
							sort_key: _this.sort_key,
							p: _this.page,
							v: _this.vague,
							price_high: _this.highPrice,
							price_low: _this.lowPrice,
							check_service: JSON.stringify(_this.check_service),
							l_h_filter: JSON.stringify(_this.lease_type_filter),
							h_t_filter: JSON.stringify(_this.house_type_filter)
						}
					})
					.then(function(response) {
						if (response.data.errno == '0') {
							_this.houses = response.data.data.houses;
							_this.current_page = response.data.data.page;
							_this.total_page = response.data.data.total_page;
							_this.search_sx = false;
							console.log(response.data.data);
						} else {
							console.log(response.data);
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			}
		},
		mounted() {
			this.getHouseData();
			var _this = this;
			// 加载出数据库中的设备信息
			axios
				.get("/api/v1.0/house/get_facility")
				.then(function(response) {
					if (response.data.errno === '0') {
						_this.service_item = response.data.data;
						console.log(_this.service_item);
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});
		},
		beforeRouteLeave(to, from, next) {
			from.meta.keepAlive = false;
			next();
		}
	};
</script>

<style scoped>
	.productTitle {
		height: 45px;
		padding-top: 15px;
		font-size: 14px;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 2;
	}

	.priceText {
		width: 80px;
		background: #f2f2f2;
		font-size: 15px;
		text-align: center;
		padding: 3px;
	}

/* 	.v-list-item__content {
		padding: 12px 0 0 0 !important;
	} */

	select {
		text-align: center !important;
		text-align-last: center !important;
		width: 100% !important;
		padding: 0 2% !important;
		margin: 0 !important;
	}

	option {
		text-align: center !important;
	}
</style>
<style>
	.el-input__inner {
		height: inherit !important
	}
</style>
